import React, { useEffect, useCallback } from 'react';
import { Modal, Select, Form, Input, Button, Space } from 'antd';
const { TextArea } = Input;

interface ReplyProps {
  isReplyVisible: boolean;
  onCancel: () => void;
  onSubmit: (value: any) => void;
}

const { Option } = Select;

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const Reply: React.FC<ReplyProps> = ({
  isReplyVisible,
  onCancel,
  onSubmit,
}) => {
  const [form] = Form.useForm();

  useEffect(() => {
    if (isReplyVisible) {
      form.resetFields();
    }
  }, [form, isReplyVisible]);

  const handleCancel = useCallback(() => {
    onCancel();
    form.resetFields();
  }, [onCancel, form]);

  const onFinish = useCallback(
    (values: any) => {
      onSubmit(values);
    },
    [onSubmit],
  );

  const onReset = useCallback(() => {
    form.resetFields();
  }, [form]);

  return (
    <Modal
      title="回复"
      visible={isReplyVisible}
      onCancel={handleCancel}
      footer={null}
      forceRender={true}
    >
      <Form {...layout} form={form} onFinish={onFinish}>
        <Form.Item name="comment" label="回复" rules={[{ required: true }]}>
          <TextArea placeholder="请输入" />
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Space>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <Button htmlType="button" onClick={onReset}>
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default Reply;
